import React, { Component } from 'react';
import { StyleSheet, Animated, TouchableOpacity, Text } from 'react-native';
import { GLOBAL } from '../config/global';

const scale = GLOBAL.SCALE;
const ScreenWidth = GLOBAL.SCREEN_WIDTH;
const ScreenHeight = GLOBAL.SCREEN_HEIGHT;
export default class DropDownCpt extends Component {
	constructor(props) {
		super(props);
		this.state = {
			_isShow: false,
			removeSubviews: props.removeSubviews || true,
			coverClickable: props.coverClickable || true,
			onCoverPress: props.onCoverPress || null,
			showAnimationType: props.showAnimationType || 'spring'
		}
		this._path = new Animated.Value(0);
	}


	show (callback) {
		this.setState({ _isShow: true }, () => {
			if (!this.props.showAnimationType || this.props.showAnimationType == 'spring') {
				Animated.spring(this._path, { toValue: 1 }).start(() => {
					callback && callback();
				});
			} else {
				Animated.timing(this._path, { toValue: 1 }).start(() => {
					callback && callback();
				});
			}
		});
	}


	dismiss (callback) {
		Animated.timing(this._path, { toValue: 0, duration: 200 }).start(() => {
			this.setState({ _isShow: false }, () => {
				callback && callback();
			});
		});
	}



	renderContent () {
		return null;
	}

	/**
     * 前景位置
     */
	_getContentPosition () {
		return { justifyContent: 'flex-end', alignItems: 'center' }
	}

	/**
     * 重写前景动画效果
     * @param {*} path 
     */
	_getContentInterpolate (path) {
		return [
			{
				translateY: path.interpolate(
					{
						inputRange: [0, 0.5, 1],
						outputRange: [scale * 200, scale * 200, 0]
					}
				)
			}
		]
	}


	render () {
		if (this.state._isShow || (this.props && this.props.removeSubviews === false)) {
			return (
				<Animated.View style={[styles.container, {
					opacity: this._path.interpolate({
						inputRange: [0, 0.5, 1],
						outputRange: [0, 1, 1]
					}),
					...this._getContentPosition(),
					transform: [
						{
							translateX: this._path.interpolate(
								{
									inputRange: [0, 0.01, 1],
									outputRange: [-ScreenWidth, 0, 0]
								}
							)
						}
					]
				}]}>
					<TouchableOpacity
						onPress={() => {
							if (!this.props || (this.props.coverClickable || this.props.coverClickable == null)) {
								this.dismiss(this.props.onCoverPress);
							}
						}}
						style={{ position: 'absolute', width: ScreenWidth, height: ScreenHeight }} />
					<Animated.View style={{
						opacity: this._path.interpolate({ inputRange: [0, 0.5, 1], outputRange: [0, 0, 1] }),
						transform: this._getContentInterpolate(this._path),
					}}>
						{this.renderContent()}
					</Animated.View>
				</Animated.View>
			)
		} else {
			return null;
		}



	}
}
const styles = StyleSheet.create({
	container: {
		position: 'absolute',
		left: 0,
		right: 0,
		top: 0,
		bottom: 0,
		backgroundColor: 0x00000050
	},
});